<template>
	<view class="container">
		<!-- <view class="top">头部</view> -->
		<view class="middle">
			<!-- <view class="list">
				<view class="item">
					<text class="name">标题：</text>
					<input type="text" placeholder="请输入">
				</view>
				<view class="item2">
					<view class="name">描述：</view>
					<textarea name="" rows="4" placeholder="请输入描述"></textarea>
				</view>
				<view class="item2">
					<view class="name">图片：</view>
					<view class="upload">
						<image src="../../static/my/upload.png" mode=""></image>
						<text>点击上传</text>
					</view>
				</view>
			</view> -->

			<uni-forms ref="valiForm" :rules="rules" :modelValue="formData" labelPosition="top">
				<uni-forms-item label="标题" name="name" required>
					<uni-easyinput v-model="formData.name" placeholder="标题" />
				</uni-forms-item>
				<uni-forms-item label="微信" name="contact">
					<uni-easyinput v-model="formData.contact" placeholder="微信" />
				</uni-forms-item>
				<uni-forms-item label="描述" name="content" required>
					<uni-easyinput v-model="formData.content" type="textarea" placeholder="描述"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="照片" name="imgs">
					<!-- :auto-upload="true" 
					v-model="formData.imgs" -->
					<uni-file-picker title="最多选择9张照片" limit="9" mode="grid" file-mediatype="image" @delete="p_delete"
						@select="p_select" @success="p_success" @fail="p_fail"></uni-file-picker>
				</uni-forms-item>
			</uni-forms>

		</view>
		<view class="bottom">
			<!-- 提交 -->
			<button type="default" @click="submit('valiForm')">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					name: '',
					contact: '',
					content: '',
					imgs: []
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '标题不能为空'
						}]
					},
					desn: {
						rules: [{
							required: true,
							errorMessage: '描述不能为空'
						}]
					}
				}
			}
		},
		methods: {
			submit(ref) {
				let that = this;
				this.$refs[ref].validate()
					.then(res => {
						// console.log('success', res);
						that.$http.httpReq({url:'api/member/feedback',token:'',data:that.formData,method:'post'})
							.then(res=>{
								console.log(res);
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 1500,
									success() {
										setTimeout(function(){
											uni.navigateBack({
												delta: 1
											})
										},2000);
									}
								})
							})
							.catch(err=>{
								console.log(err);
							});
					}).catch(err => {
						console.log('err', err);
					})
			},
			p_delete(e) {
				console.log('删除：', e);
				this.formData.imgs.splice(this.formData.imgs.indexOf(e.tempFilePath), 1);
			},
			p_success(e) {
				console.log('成功：', e);
			},
			async p_select(e) {
				console.log('选择：', e);
				let that = this;
				uni.showLoading({
					title: '上传中',
					mask: true,
				});
				await e.tempFilePaths.forEach(function(item, key) {
					// that.formData.imgs.push(item);
					that.$http.httpFile({
							url: 'api/member/upload',
							filePath: item
						})
						.then(res => {
							let json = JSON.parse(res.data);
							
							console.log(json);
							// if (json.code == 401) {
							// 	uni.reLaunch({
							// 		url: '/pages/my/auth'
							// 	})
							// 	return ;
							// }
							
							that.formData.imgs.push(json.data.filePath);
						})
						.catch(err => {
							console.log(err);
						});
				});
				setTimeout(function() {
					uni.hideLoading();
				}, 1500);
			},
			p_fail(e) {
				console.log('失败：', e);
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.top {}

		.middle {
			padding: 15px;
			background-color: #fff;

			.list {
				.item {
					padding: 20rpx;
					display: flex;
					border-bottom: 2rpx solid #f0f0f0;
					height: 50rpx;
					line-height: 50rpx;
				}

				.item2 {
					.name {
						padding: 20rpx 20rpx 0;
						height: 50rpx;
						line-height: 50rpx;
					}

					textarea {
						width: 710rpx;
						padding: 20rpx;
						border: 1rpx solid #d9d9d9;
						margin: 0 auto;
						box-sizing: border-box;
						margin: 20rpx;
					}

					border-bottom: 2rpx solid #f0f0f0;

					.upload {
						margin: 20rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						align-self: center;
						width: 150rpx;
						height: 150rpx;
						border: 1rpx solid #d9d9d9;
						text-align: center;

						image {
							width: 75rpx;
							height: 75rpx;
						}

						text {
							margin-top: 10rpx;
							font-size: 24rpx;
							color: #8080a1;
						}
					}

					&:last-child {
						border-bottom: none;
					}
				}
			}
		}

		.bottom {
			// position: fixed;
			// bottom: 40rpx;
			margin-bottom: 40rpx;
			width: 90%;
			margin: 0 5%;
			text-align: center;

			// background: #06bf12;
			// color: #ffffff;
			// height: 100rpx;
			// line-height: 100rpx;
			button {
				// height: 100rpx;
				// line-height: 100rpx;
				background: #06bf12;
				color: #ffffff;

				&:active {
					color: grey;
				}

				margin-bottom: 50rpx;
			}

			&:active {
				color: grey;
			}
		}
	}
</style>
